<template>
    <div id="app">
        <div class="commenNav">
            <div class="stockNav" @click='backStockList'>
                <div class="stockIcon"></div>
                <div>库存管理</div>
            </div>
            <div class="buttonBox" v-show='this.$store.state.stockManage.isButtonBox'><button @click='toInStockFileUpload'>入库文件上传</button></div>
            <div class="catalogBox" v-show='this.$store.state.stockManage.catalogBox'>
                <ul>
                    <li v-for='(item,index) in this.$store.state.stockManage.catalog'>
                        <span class="catalogIcon"></span><span class="catalogClass" @click='goSomewhere(index)'>{{item.label}}</span>
                    </li>
                </ul>
            </div>
            <div class="searchButtonBox" v-show='this.$store.state.stockManage.isSearchContent'>
                <input type="text" placeholder='输入名称开始搜索'v-model='searchContent' @keyup.enter='search'>
                <button class="searchButton" @click='search'>搜索</button>
            </div>
            <div class="searchBox" v-show='this.$store.state.stockManage.isSearchBox'>
               <span class="txt1">筛选查找:</span>
                <div class="startDate"><el-date-picker v-model="startDate"type="date" :editable='false'></el-date-picker></div>
                <span class="txt2">至</span>
                <div class="endDate"><el-date-picker v-model="endDate"type="date" :editable='false'></el-date-picker></div>
            </div>
        </div>
        <component v-bind:is='this.$store.state.stockManage.whichComponents' keep-alive></component>
    </div>
</template>
<script>
    import {
        mapActions
    } from 'vuex'
    import medicineInfo from './medicineInfo.vue'
    import stockList from './stockList.vue'
    import bigBox from './bigBox.vue'
    import midBox from './midBox.vue'
    import littleBox from './littleBox.vue'
    import stockRecord from './stockRecord.vue'
    import outStockInfo from './outStockInfo.vue'
    export default {
        data() {
            return {
                startDate: '',
                endDate: '',
                searchContent: '',
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
            }
        },
        created: function() {

        },
        methods: {
            // 搜索
            search: function() {
                // 搜索库存列表
                if (this.$store.state.stockManage.isSearchBox == true) {
                    let list = {},
                        dateType = false,
                        contentType = false;
                    if (this.startDate != '' && this.endDate != '' && this.startDate != undefined && this.endDate != undefined) {
                        let start = Date.parse(new Date(this.startDate)),
                            end = Date.parse(new Date(this.endDate));
                        if (start <= end) {
                            list.startDate = this.UnFormatDate(this.startDate);
                            list.endDate = this.UnFormatDate(this.endDate);
                            dateType = true;
                        }
                    } else {
                        dateType = false;
                    }
                    if (this.searchContent != '') {
                        list.name = this.searchContent;
                        contentType = true;
                    } else {
                        contentType = false;
                    }
                    if (contentType == true || dateType == true) {
                        this.$root.eventHub.$emit('stockListSearch', list)
                    }
                } else {
                    // 监管码搜索
                    if (this.searchContent == '') {
                        return
                    } else {
                        let code = this.searchContent;
                        switch (this.$store.state.stockManage.codeBox) {
                            case 3:
                                this.$root.eventHub.$emit('bigCodeSearch', code);
                                break;
                            case 2:
                                this.$root.eventHub.$emit('midCodeSearch', code);
                                break;
                            case 1:
                                this.$root.eventHub.$emit('littleCodeSearch', code);
                                break;
                        }
                    }
                }
            },
            // 回到主组件:库存列表
            backStockList: function() {
                this.isBackList = true;
                this.$store.commit('backStockList');
            },
            // 面包屑跳转
            goSomewhere: function(i) {
                this.$store.commit('toSomewhere', {
                    index: i
                });
            },
            // 入库文件上传组件
            toInStockFileUpload: function() {
                this.$router.push({
                    path: '/home/inStockFileUpload'
                })
            },
            // 请求格式化日期
            UnFormatDate(date) {
                return new Date(date).toLocaleString().split(' ')[0].replace(/\//g, '-');
            },
            ...mapActions([''])
        },
        components: {
            'medicineInfo': medicineInfo,
            'stockList': stockList,
            'bigBox': bigBox,
            'midBox': midBox,
            'littleBox': littleBox,
            'stockRecord': stockRecord,
            'outStockInfo': outStockInfo
        },
        beforeDestroy: function() {
            this.backStockList();
        }
    }

</script>
<style scoped>
    .commenNav {
        display: inherit;
    }
    
    .stockNav {
        cursor: pointer;
        width: 132px;
        height: 50px;
        line-height: 50px;
        padding-left: 38px;
        float: left;
    }
    
    .buttonBox {
        float: left;
        margin: 10px 0 10px 50px;
    }
    
    .filterBox {
        margin: 0 0 0 80px;
        float: right;
    }
    
    .buttonBox button {
        border: none;
        background-color: #43DCE7;
        color: #fff;
        border-radius: 5px;
        padding: 5px 10px;
    }
    
    .startDate,
    .endDate,
    .txt1,
    .txt2 {
        float: left;
    }
    
    .startDate,
    .endDate {
        height: 32px;
        overflow: hidden;
        margin: 9px 0;
        position: relative;
        border: 1px solid #dddddd;
        box-sizing: border-box;
        border-radius: 5px;
        width: 148px;
    }
    
    .el-input {
        top: -2px;
        left: -1px;
    }
    
    .el-date-editor.el-input {
        width: 150px;
    }
    
    .txt1,
    .txt2 {
        height: 50px;
        line-height: 50px;
    }
    
    .txt1 {
        margin: 0 30px 0 0;
    }
    
    .txt2 {
        margin: 0 10px;
    }
    
    .searchBox {
        height: 50px;
        font-size: 14px;
        color: #333333;
        float: right;
        margin: 0 50px 0 0;
    }
    
    .searchButtonBox input {
        height: 32px;
        margin: 9px 0;
        line-height: 30px;
        border-radius: 5px;
        padding-left: 5px;
        float: left;
        border: 1px solid #dddddd;
        box-sizing: border-box;
        border-radius: 5px;
    }
    
    @media screen and (min-width:1280px) and (max-width:1600px) {
        .searchButtonBox input {
            width: 180px;
        }
    }
    
    @media screen and (min-width: 1600px) {
        .searchButtonBox input {
            width: 280px;
        }
    }
    
    .stockIcon {
        width: 24px;
        height: 24px;
        margin: 13px 10px 13px 0;
        overflow: hidden;
        float: left;
    }
    
    .catalogBox {
        float: left;
        height: 50px;
        line-height: 50px;
    }
    
    ul {
        margin: 0;
        padding: 0;
    }
    
    li {
        float: left;
    }
    
    .catalogClass {
        cursor: pointer;
    }
    
    .searchButton {
        border: none;
        background-color: #43DCE7;
        color: #fff;
        border-radius: 5px;
        padding: 5px 20px;
        margin: 10px 40px 10px 20px;
        float: right;
    }
    
    .searchButtonBox {
        float: right;
    }

</style>
